<template>
  <view class="driverlist-container">
    <view class="driverlist-search">
      <u-search
        shape="round"
        v-model="searchStr"
        @change="handleSearch"
      ></u-search>
    </view>
    <view
      class="driver-item"
      v-for="(item, index) in showList"
      :key="index"
      @click="toDetail(item)"
    >
      <image src="../../static/img/default-img.png" mode="widthFix"></image>
      <view class="driver-info">
        <view class="line">
          <view class="top-left">
            <view class="driver-name">
              {{ item.StaffName }}
            </view>
          </view>
        </view>
        
        <view class="line">
          <view class="top-left">
             <text style="color: #666666">
               所属企业
             </text>
          </view>
          <view class="top-right">
            <text style="color: #333333">
              {{ item.CompanyName }}
            </text>
          </view>
        </view>
		<view class="line">
		  <view class="top-left">
		     <text style="color: #666666">
		       当前积分
		     </text>
		  </view>
		  <view class="top-right">
		    <text style="color: #333333">
		      <score-tag :score="item.StaffScore"></score-tag>
		    </text>
		  </view>
		</view>
		
		<view class="line">
		  <view class="top-left">
		     <text style="color: #666666">
		       最近减分
		     </text>
		  </view>
		  <view class="top-right">
		    <text style="color: #333333">
		      {{ item.Score }}
		    </text>
		  </view>
		</view>
		
		<view class="line">
		  <view class="top-left">
		     <text style="color: #666666">
		       最近学习
		     </text>
		  </view>
		  <view class="top-right">
		    <text style="color: #333333">
		      {{ item.ETime.replace('T',' ') }}
		    </text>
		  </view>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getScoreColor } from '@/common/utils/index.js'
  import ScoreTag from '@/components/score-tag/score-tag.vue'
  export default {
    data() {
      return {
        driverList: [],
        showList: [],
        roleDriverListTemp: [],
        pageLimit: 20,
        searchStr: ''
      };
    },
    components: {
      ScoreTag
    },
    mounted() {
      this.init()
    },
    onReachBottom(){
      this.addShowList()
    },
    computed: {
      getCodeType () {
        return function (score) {
          return getScoreColor(score)
        }
      }
    },
    methods: {
      // 过滤搜索内容添加到显示列表
      handleSearch (searchValue) {
        this.showList = []
        if (searchValue === '') {
          this.showList = this.roleDriverListTemp
          return
        }
        this.roleDriverListTemp.forEach((value, index) => {
          if (value.StaffName && value.StaffName.includes(searchValue)) {
            this.showList.push(value)
          }
        })
      },
      toDetail (item) {
        const userObj = JSON.stringify(item)
        uni.navigateTo({
          url: `/pages/studyDetail/studyDetail?pageType=study&user=${userObj}&userId=${item.Id}&CompanyName=${item.CompanyName}`
        })
      },
      addShowList(){
        if (this.showPage === 1) return
        // if(this.roleDriverListTemp[0]=='del' && this.roleDriverListTemp.length == 1) return
        this.showPage += 1
        this.showList.push(...this.driverList.splice(0,this.pageLimit))
        this.roleDriverListTemp = JSON.parse(JSON.stringify(this.showList))
      },
      init () {
        // 页面pv事件埋点
        this.$aplus.aplus_queue.push({
          'action':'aplus.sendPV',
          'arguments':[{
            is_auto: false
          }, {
            sapp_id:'19344',//isv根据实际填写自己应用的参数
            sapp_name:'zhongdianchelian',//isv根据实际填写自己应用的参数
            // 自定义PV参数key-value键值对，以下内容必填，根据应用实际情况设置。
            page_id: 'study-record',//isv根据实际填写自己应用的参数
            page_name: '学习记录',//isv根据实际填写自己应用的参数
            page_url: 'pages/study-record/study-record'//isv根据实际填写自己应用的参数
          }]
        })
        uni.showLoading({
          title: '正在获取驾驶员列表',
          mask: true
        })
        uni.getStorage({
          key: 'token',
          success: (res) => {
            const token = res.data
            this.$http.get('Muck/GetStaffScore',{
              Token: token
            }).then(res=>{
              this.driverList = res.result.List
              this.addShowList()
              uni.hideLoading()
              uni.showToast({
                title:res.result.Count + '条信息'
              })
            }).catch(err=>{
              uni.hideLoading()
              const msg = err.result || err
              uni.showToast({
                title:'获取数据失败,'+msg,
                icon:'none'
              })
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.driverlist-container {
  .driverlist-search {
    padding: 12rpx 16rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
  }
  .driver-item {
    height: 300rpx;
    display: flex;
    align-items: center;
    .driver-info{
      flex: 1;
      .line{
        box-sizing: border-box;
        padding: 0 16rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        align-items: center;
        .top-left{
          display: flex;
          align-items: center;
          .driver-name {
            color: #7A7A7A;
            font-size: 32rpx;
          }
          // background-color: #FEAC40;
          // border: 1rpx solid #FEAC40;
          // .driver-code-orange{
          //   // color: #FEAC40;
          //   background-color: orange !important;
          //   border: 1rpx solid orange !important;
          // }
          // .driver-code-green{
          //   background-color: green !important;
          //   border: 1rpx solid green !important;
          // }
          // .driver-code-red{
          //   background-color: red !important;
          //   border: 1rpx solid red !important;
          // }
          // .driver-code {
          //   display: flex;
          //   margin-left: 32rpx;
          //   align-items: center;
          //   box-sizing: border-box;
          //   .code-type-orange{
          //     background-color: #FFFFFF;
          //     color: orange;
          //   }
          //   .code-type-green{
          //     background-color: #FFFFFF;              
          //     color: green;
          //   }
          //   .code-type-red{
          //     background-color: #FFFFFF;
          //     color: red;
          //   }
          //   .code-type {
          //     background-color: #FFFFFF;
          //     padding: 0rpx 8rpx;
          //     box-sizing: border-box;
          //   }
          //   .code-score {
          //     color: #FFFFFF;
          //     margin: 0rpx 8rpx;
          //   }
          // }
        }
        .top-right{
        }
      }
    }
    image {
      width: 160rpx;
      border-radius: 50%;
    }
  }
}
</style>
